<template>
	<view class="regirst">
		<view class="list">
			<view class="label">
				<image src="../../../static/image/phone.png" class="phone_img"></image>
				手机号
			</view>
			<view class="right">
				<input type="number" v-model="phoneNumber" placeholder="请输入手机号"
					placeholder-style="font-size:16px">
				<view class="send-code" @click="getVerificationCode">{{ codeText }}</view>
			</view>
		</view>
		<!-- <view class="list">
			<view class="label">
				<image src="../../../static/image/pass.png" class="phone_img"></image>
				密码
			</view>
			<view class="right">
				<input style="width: 100%;" type="password" placeholder="请输入密码"
					placeholder-style="font-size:16px">
			</view>
		</view> -->
		<view class="list">
			<view class="label">
				<image src="../../../static/image/code.png" class="phone_img"></image>
				验证码
			</view>
			<yi-code @onChange="handleCode"></yi-code>
		</view>
		<view class="register" @click="handlelogin">登录</view>
		<view class="check_box">
			 <view class="radio-container" @click="toggleRadio">
			      <image :src="checked ? '../../static/image/check.png' : '../../static/image/noCheck.png'" class="radio-icon"></image>
			      <view class="radio-label">我已阅读并同意<text style="color: #FA254F;">《用户协议》</text>与<text style="color: #FA254F;">《隐私政策》</text></view>
			    </view>
		</view>
		<view class="other_login">
			<view class="other_top"><u-divider text="第三方登录"></u-divider></view>
			<view class="other_bottom">
				<image class="three_login_img" src="../../../static/image/QQ.png"></image>
				<image class="three_login_img" src="../../../static/image/wechat.png"></image>
				<image class="three_login_img" src="../../../static/image/paliy.png"></image>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				phoneNumber:'',
				dataCode:'',
				checked:false,
				codeText:'获取验证码',
				 countdown: 60, // 倒计时时间
				      timer: null, // 计时器
			}
		},
		methods:{
			handleCode(data){
				this.dataCode = data
			},
			toggleRadio() {
			    this.checked = !this.checked; // 切换选中状态
			},
			 async  getVerificationCode() {
			      if (this.timer) return; // 防止重复点击
				  let params = {
				  	mobile:this.phoneNumber
				  }
				  let res = await this.$api.getCode(params)
				  if(res.code === 1 && res.data){
					clearInterval(this.timer);
					this.timer = null;
				  }else {
					this.$refs.uToast.show({
					    type:'error',
					    message:res.msg,
					})
					 return
				  }
			 
			      this.countdown = 60;
				  
			      this.timer = setInterval(() => {
			        if (this.countdown > 0) {
			          this.countdown -= 1;console.log(this.countdown)
					  this.codeText = this.countdown + 's 重新获取'
			        } else {
			          clearInterval(this.timer);
			          this.timer = null;
			        }
			      }, 1000);
			    },
			async handlelogin(){
				if(this.checked === false){
					this.$refs.uToast.show({
					    type:'error',
					    message:'请先勾选用户协议',
					}) 
				}else {
					let params = {
						terminal: "6",
						scene: "2",
						code:this.dataCode,
						account:this.phoneNumber
					}
					let res = await this.$api.userLogin(params)
					if(res.code === 1 && res.data){
						this.$store.dispatch('setUser', res.data);
						uni.setStorageSync('token',res.data.token)
						uni.switchTab({
							url:'/pages/index/index'
						})
					}else{
						this.$refs.uToast.show({
						    type:'error',
						    message:res.msg,
						}) 
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.list {
		margin-top: $margin-top-20;
	}
	
	.label {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		.phone_img{
			width: 16px;
			height: 16px;
			margin-right: 5px;
		}
	}
	.right {
		width: 95%;
		height: 45px;
		background: #FFF4F3;
		border-radius: 45rpx;
		line-height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 15px;
		font-size: 15px;
		font-weight: 400;
	
		input {
			font-size: 17px;
			display: inline-block;
		}
	
		.send-code {
			width: 100px;
			height: 30px;
			font-size: $font-size-16;
			color: $primary_color;
			line-height: $line-height-30;
			text-align: center;
			margin-right: 0;
			margin-left: 0;
			padding-left: 0;
			padding-right: 0;
			border-left: 1px solid $primary_color;
		}
	}
	.register{
		width: 100%;
		height: 50px;
		color: $white_color;
		font-size: $font-size-18;
		text-align: center;
		line-height: $line-height-50;
		margin-top: $margin-top-20;
		border: 1px solid $primary_color;
		border-radius: $radius_30;
		background: linear-gradient(to right, #FF5A42, #F92350);
	}
	.check_box{
		width: 90%;
		height: 30px;
		margin: 0 auto;
		margin-top: 10px;
		display: flex;
		align-items: center;
		.radio-container {
		  display: flex;
		  align-items: center;
		}
		
		.radio-icon {
		  width: 20px;
		  height: 20px;
		}
		
		.radio-label {
			margin-left: 5px;
		  font-size: $font-size-12;
		}
	}
	.other_login{
		width: 90%;
		height:120px;
		margin: 0 auto;
		margin-top:$margin-top-20;
		.other_top{
			width: 100%;
			height: 10px;
		}
		.other_bottom{
			width: 100%;
			height: 90px;
			@include flexAround();
			.three_login_img{
				width: 41px;
				height: 41px;
			}
		}
	}
</style>